<template>
  <div>
    <h2>发表评论</h2>
    <hr/>
    <textarea name="comment" id="" placeholder="占位" v-model="input"></textarea>
    <cube-button style="margin-bottom: 3px">发表评论</cube-button>
    <ul class="list">
      <li v-for="(value,index) in comments" :key="value.id">
        <div class="author">
          第{{index + 1}}楼 用户：{{value.author.loginname}} 发表时间：{{value.create_at | time('Y-M-D H:m:S')}}
        </div>
        <div class="content" v-html="value.content"></div>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data () {
    return {
      input: ''
    }
  },
  props: ['comments']
}
</script>

<style lang="stylus" scoped>
h2
  font-weight 900
  margin-top 10px
  font-size 20px
textarea
  margin 0
.list
  line-height 1.5em
  .author
    background-color #ccc
  .content
    padding-left 2em
>>> img 
  width 98%
</style>
